<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>加班申请</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
    .item-img {
        width: 3rem;
        height: 3rem;
    }

    .list-block .item-inner:after {
        height: 1.2px;
    }
    
    .tab-page-block {
        margin: 2.5rem 0;
        padding: 0;
    }
    
    .buttons-tab .button.active {
        color: #ff6101;
        border-color: #ff6101;
    }

    .orange-color {
        color: #ff6101;
    }
    
    .hint {
        width: 100%;
        padding-top: 50px;
        text-align: center;
    }
    
    #tab3 #tab-content3 {
        display: none;
    }
    </style>
</head>

<body>
    <!-- 加班记录列表模板 -->
    <script type="text/html" id="overtime-list-template">
    {{each list}}
        <li class="item-content item-link list-item">
        <div class="item-media">
        <img class="item-img" src="
        {{if $value.status == 0}}
            images/ic_verify.png
        {{else if $value.status == 1}}
            images/ic_agree.png
        {{else}}
            images/ic_disagree.png
        {{/if}}
        ">
        </div>
        <div class="item-inner">
        <div class="item-title" id="title">标题：{{$value.title}}</div>
        <div class="item-subtitle" id="type" style="display: none">类型：{{$value.type}}</div>
        <div class="item-subtitle" id="reason">理由：{{$value.reason}}</div>
        <div class="item-subtitle" id="result" style="display: none">审核结果：
        {{if $value.status == 0}}
            审核中
        {{else if $value.status == 1}}
            审核通过
        {{else}}
            审核不通过
        {{/if}}
        </div>
        <div class="item-subtitle" id="time">时间：{{$value.start_time | getTimeStr}}至{{$value.end_time | getTimeStr}}</div>
        </div>
        </li>
    {{/each}}
    </script>
    <!-- end -->
    <!-- 加班审核列表的模板 -->
    <script type="text/html" id="overtime-check-list-template">
    {{each list}}
        <div class="card" id="card-id-{{$value.id}}">
        <div class="card-header orange-color">{{$value.user_name}}的加班申请</div>
        <div class="card-content">
        </div>
        <div class="card-content-inner">
        <span>原因：{{$value.reason}}</span><br/>
        <span>时间：{{$value.start_time | getTimeStr}}至{{$value.end_time | getTimeStr}}</span>
        </div>
        <div class="card-footer">
        <a href="#" id="{{$value.id}}" class="link agree">同意</a>
        <a href="#" id="{{$value.id}}"  class="link disagree">拒绝</a>
        <a href="#" class="link" style="display:none;">发消息</a>
        </div>
        </div>
    {{/each}}
    </script>
    <!-- end -->
    <div class="content">
        <div class="buttons-tab fixed-tab buttons-fixed">
            <a href="#tab1" class="tab-link active button">加班记录</a>
            <a href="#tab2" class="tab-link button">加班申请</a>
            <a id="tab-check-overtime" href="#tab3" class="tab-link button">加班审核</a>
        </div>
        <div class="tabs">
            <div id="tab1" class="tab active">
                <div class="content-block tab-page-block" id="tab-page-list"></div>
            </div>
            <div id="tab2" class="tab">
                <div class="content-block tab-page-block" id="tab-page-new">
                    <div class="list-block">
                        <ul>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">加班类型</div>
                                        <div class="item-input">
                                            <input type="text" placeholder="选择加班类型" id="select-type">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">加班标题</div>
                                        <div class="item-input">
                                            <input type="text" placeholder="填写加班标题" id="overtime-title">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">加班原因</div>
                                        <div class="item-input">
                                            <textarea id="overtime-reason" placeholder="填写加班原因"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">开始时间</div>
                                        <div class="item-input">
                                            <input type="text" placeholder="请选择开始时间" id="start-time-picker" class="date-picker">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">结束时间</div>
                                        <div class="item-input">
                                            <input type="text" placeholder="请选择结束时间" id="end-time-picker" class="date-picker">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">加班小时</div>
                                        <div class="item-input">
                                            <input type="text" placeholder="填写加班小时" id="hours">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title label">是否带薪</div>
                                        <div class="item-input">
                                            <label class="label-switch">
                                                <input type="checkbox" id="salary-checkbox">
                                                <div class="checkbox"></div>
                                            </label>
                                            <label class="label_checkbox-hint">不带薪</label>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content item-link">
                                    <div class="item-inner">
                                        <div class="item-title label">我的上级</div>
                                        <div class="item-input">
                                            <input type="text" readonly=true value="" id="my_leader">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <!-- <li>
                                <div class="item-content item-link">
                                    <div class="item-inner">
                                        <div class="item-title label">抄送给</div>
                                        <div class="item-input">
                                            <input type="text" readonly=true placeholder="选择抄送对象(可为空)" id="hours">
                                        </div>
                                    </div>
                                </div>
                            </li> -->
                        </ul>
                    </div>
                    <div class="content-block">
                        <div class="row">
                            <div class="col-50"><a href="#" id="btn-clear" class="button button-big button-fill button-danger">重置</a></div>
                            <div class="col-50"><a href="#" id="btn-submit" class="button button-big button-fill button-success">提交</a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tab3" class="tab">
                <div class="content-block tab-page-block" id="tab-page-check-content">
                    
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="js/apply.js?version=2016053101"></script>
    <script type="text/javascript" src="js/common.js?version=2016053101"></script>
    <script type="text/javascript" src="js/arttemplate.js?version=2016053101"></script>
    <script type="text/javascript" src="js/overtime.js?version=2016053101"></script>
</body>

</html>
<!--